<template>
  <div @click="switchState" @mouseover="controlShow = true" @mouseleave="controlShow = false" class="relative">
    <!-- 视频播放器 -->
    <video class="w-full h-full" ref="videoPlayer" :src="videoURL"></video>
    <!-- control栏 -->
    <div class="w-full absolute z-50 bottom-0">
      <!-- 进度条容器 -->
      <div class="w-full h-1 mb-0 flex items-center bg-slate-300">
        <!-- 进度条头标 -->
        <div class="w-5 h-5 bg-orange-500 absolute translate-x-5">

        </div>
        <!-- 已走进度条 -->
        <div class="w-96 h-full bg-red-600">

        </div>
      </div>
      <!-- 功能键栏 -->
      <div v-show="controlShow" class="w-full h-14 flex justify-between items-center control-color">
        <!-- 左侧部分 -->
        <div class="flex h-full">
          <!-- 播放/暂停 -->
          <div @click="switchState" class="h-full aspect-square flex justify-center items-center">
            <div>
              <svg v-show="!isPlaying" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"/></svg>
              <svg v-show="isPlaying" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>
            </div>
          </div>
          <!-- 播放下一个视频 -->
          <div></div>
          <!-- 时间进度 -->
          <div></div>
        </div>

        <!-- 右侧部分 -->
        <div class="flex h-full">
          <!-- 清晰度 -->
          <div></div>
          <!-- 倍速 -->
          <div></div>
          <!-- 音量 -->
          <div></div>
          <!-- 设置 -->
          <div></div>
          <!-- 宽屏模式 -->
          <div></div>
          <!-- 网页全屏 -->
          <div></div>
          <!-- 全屏 -->
          <div></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineProps, onMounted, ref, watch} from "vue";

const props = defineProps(["videoURL"])
const videoPlayer = ref(null)
const isPlaying = ref(false)
const controlShow = ref(false)

function switchState(){
  if (videoPlayer.value.paused){
    videoPlayer.value.play()
  }else {
    videoPlayer.value.pause()
  }
  isPlaying.value = videoPlayer.value.paused
}

onMounted(()=>{
  isPlaying.value = videoPlayer.value.paused
})

</script>

<style scoped>
.control-color{
  background: linear-gradient(to top,rgba(0,0,0,0.8),rgba(0,0,0,0.1));
}
</style>
